<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="titlepage">
				<h2>添加地址</h2>
			</div>
		</div>
	</div>
</div>
<div class="brand-bg">
	<div class="container">
		<div class="row">
			<div class="bg-user-shop col-md-12">
				<form class="main_form">
					<div class="row">

						<div class="user-shop-message col-md-12">
							<div class="user-shop-name">收货人姓名</div>
							<input id="address-user" type="text" name="username" placeholder="收货人姓名"/>
						</div>
						<div class="user-shop-message col-md-12">
							<div class="user-shop-name">联系手机</div>
							<input id="address-phone" type="tel" maxlength="11" name="username" placeholder="联系手机"/>
						</div>
						<div class="user-shop-message col-md-12">
							<div class="select-address-list">
								<select id="province" class="select-list">
									<option value="">--请选择省份--</option>
								</select>
								<select id="city" class="select-list">
									<option value="">--请选择市/县--</option>
								</select>
								<select id="district" class="select-list">
									<option value="">--请选择区--</option>
								</select>
							</div>
							<input id="address-addr" type="text" name="username" placeholder="街道/村/门牌(必填)"/>
							<div class="user-shop-name">收货地址</div>
						</div>

						<div>
							<button id="saveaddr" class="btn btn-success" type="button">保存信息</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function (){
		$("#province").change(function (){
			let cityList = $("#city");
			let disList = $("#district");
			let proData = $(this).children("option:selected").data("province");
			cityList.empty();
			disList.empty();
			cityList.append(`<option value="">--请选择市/县--</option>`);
			disList.append(`<option value="">--请选择区--</option>`);
			if(proData===undefined){
				return ;
			}
			let url = `json/${proData.i}.json`;
			$.getJSON(url,function (city){
				doLoadCity(city);
			});
		});
		$("#city").change(function (){
			let disList = $("#district");
			let disData = $(this).children("option:selected").data("city").c;
			disList.empty();
			disList.append(`<option value="">--请选择区--</option>`);
			if(disData===undefined){
				return ;
			}
			doLoadDistrict(disData);
		});
		$("#saveaddr").click(function () {
			let user = $("#address-user").val();
			let phone = $("#address-phone").val();
			let proData = $("#province").val();
			let cityData = $("#city").val();
			let disData = $("#district").val();
			let addr = $("#address-addr").val();
			let phonet = /1[35789]\d{9}$/;

			if (user.length <= 0) {
				alert("收货人不能为空!");
				return;
			}
			if (!phonet.test(phone)) {
				alert("请输入正确的电话号码!");
				return;
			}
			if (proData.length <= 0) {
				alert("请选择省份!");
				return;
			}
			if (cityData.length <= 0) {
				alert("请选择市/县!");
				return;
			}
			if (addr.length <= 0) {
				alert("请填写街道/村/门牌!");
				return;
			}
			let address = proData+cityData+disData+addr;

			let params ={"addrName":user,"phone":phone,"address":address};
			$.ajax({
				url:`/ruoyi/address/saveaddress`,
				type:"post",
				data:params,
				success(result){
					if (result.status===200){
						alert("保存成功");
					}
				},
				error(){
					alert("保存失败");
				}
			});

		});
		doGetProvince();
	});
	function doLoadDistrict(district){
		let disList = $("#district");
		for (let i in district) {
			let disOption = $(`<option value="${district[i].n}">${district[i].n}</option>`);
			disList.append(disOption);
		}
	}
	function doLoadCity(city){
		let cityList = $("#city");
		for (let i in city) {
			let cityOption = $(`<option value="${city[i].n}">${city[i].n}</option>`);
			cityOption.data("city",city[i]);
			cityList.append(cityOption);
		}
	}
	function doGetProvince(){
		$.getJSON("json/index.json",function (province){
			doLoadProvince(province);
		});
	}
	function doLoadProvince(province){
		let proList = $("#province");
		for (let i in province) {
			let proOption = $(`<option value="${province[i].n}">${province[i].n}</option>`);
			proOption.data("province",province[i]);
			proList.append(proOption);
		}
	}
</script>